<template>
	<view class="action-card" @click="openView()">
		<u-icon :name="data.icon" class="action-icon" size="96"></u-icon>
		<text class="action-text">{{data.title}}</text>
		<text v-if="data.isBadge && data.num>0" class="badge">{{data.num>99?'99':data.num}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {}
		},
		methods: {
			openView() {
				uni.navigateTo({
					url: this.data.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.action-card {
		width: 650rpx;
		height: 180rpx;
		border-radius: 15rpx;
		margin-top: 30rpx;
		margin-left: 50rpx;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0;
		box-sizing: border-box;
		padding: 0 50rpx;
		display: flex;
		align-items: center;
		position: relative;

		.action-icon {
			color: $uni-color-primary;
			font-size: 96rpx;
		}

		.action-text {
			font-size: 36rpx;
			font-weight: 800;
			margin-left: 20rpx;
		}

		.badge {
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			width: 50rpx;
			height: 50rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 50rpx;
			background-color: red;
			color: white;
			border-radius: 100%;
		}
	}
</style>
